<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 class="title">我可以变颜色</h1>
  <button class="btn">红色</button>
  <button class="btn">绿色</button>
  <button class="btn">蓝色</button>

  <script>
    var oTitle = document.querySelector(".title");
    var aBtn = document.querySelectorAll(".btn");
    aBtn[0].onclick = function(){
      oTitle.style.color = "red"
    }
    aBtn[1].onclick = function(){
      oTitle.style.color = "green"
    }
    aBtn[2].onclick = function(){
      oTitle.style.color = "blue"
    }
  </script>
</body>
</html>